<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在地图上画圈和点</title>
    <!-- 加载百度地图接口 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GXCSQBVhF8oZlzjfXCmDB5oLrG7ejbYF"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script>
    // 创建一个map对象，指定div
    var map = new BMap.Map("main");
    // 设置地图当前坐标
    map.centerAndZoom(new BMap.Point(87.60052, 43.81248), 11);
    map.enableScrollWheelZoom(true);

    // 画圆
    var opt ={fillColor:"green", strokeWeight: 1.2 ,fillOpacity: 0.2, strokeOpacity: 0.5};
    var mapCircle = new BMap.Circle(new BMap.Point(87.60052, 43.81248),8000,opt);
    mapCircle.addEventListener("click", function(e){
        alert("圆的点击事件");
    });
    map.addOverlay(mapCircle);


    // 画点
    var schOption={
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#5bc0de'
    };
    var points = new BMap.PointCollection([new BMap.Point(87.60052, 43.82148), new BMap.Point(87.60052, 43.84348)], schOption);
    points.addEventListener("click", function(e){
        alert("点的点击事件");
    });
    map.addOverlay(points);
</script>

</body>
</html>